<template>
  <div class="father">
    <h3>slot默认插槽</h3>
    <div class="content">
      <category title="热门曲目列表">
        <ul>
          <li v-for="s in songs" :key="s.id">
            {{ s.name }}
          </li>
        </ul>
      </category>
      <category title="今日曲目推荐">
        <img :src="imgUrl" />
      </category>
      <category title="今日影视推荐">
        <video :src="videoUrl"></video>
        <h3>如果什么都没有就是网站没了</h3>
      </category>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Category from "./Category.vue";

let songs = reactive([
  {
    id: "01",
    name: "花一轮",
  },
  {
    id: "02",
    name: "华之集落",
  },
  {
    id: "03",
    name: "四月的雨",
  },
  {
    id: "04",
    name: "四个日本字斜杠五个日本字",
  },
]);

import imgUrl from "../../../放图片用的/769c982b992f15959fa682eb60a110af7ad81bee.jpg";
let videoUrl = ref("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
</script>

<style scoped>
.father {
  background: rgb(179, 179, 179);
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
.content {
  display: flex;
  justify-content: space-evenly;
}
img,
video {
  width: 100%;
}
</style>
